The shell module allows electron apps to open resources on a user's machine with the default application
for the type of resource resources being files or URLs, for example, in the method section of the
Shell Docs, the first and simplest example being opening a neutral.
We do this with the shell modules, open external method.
And whilst this does provide some platform specific options, passing a neutral will suffice for 99
percent of use cases over to indexed on Gmail.
I'll start by adding a button with which to open a URL from the app.
Get rid of all this as we'll have a few buttons throughout the lesson with an unclick attribute calling
show site.
And a button label of launch electronics site with a break after the button, then working in line again,
get ready for introduction.
Yes, we have to import the shared shell module.
Conch shell with destruction assignment equals require electron.
Create this button function consed show site equals a function with the click event in which to open
a euro with the default browser called Shell dot open external requesting to open https electron js
dot org.
The electron homepage save.
I'll bring my default browser into view being Chrome, click that button and there in a new tab, the
Electron JS homepage is opened as per that you are already past.
This might seem like a trivial bit of functionality, but having the ability to launch native apps outside
of our own is a very important part of being truly native, not just existing as a secluded app on the
user's machine, but being able to interact with it and have things behave as the user would expect.
After all, default system apps is chosen by the user for a reason, as they generally prefer them for
handling certain resources.
You are also being one such resource.
We can also do the same with files of varying types.
For example, in the project directory we have the Slashdot PNG image again.
As with a URL, we can very easily launch this in an electron browser window, but the user would most
likely prefer for an image to be opened with the designated sys image viewer.
I'll add a button.
Open splashed out PMG.
Calling open splash.
Duplicate the show site function.
Renaming it to open splash in which to now launch a physical resource such as this image file, we can
instead call shell dot open path, passing the absolute path to the item or file splash path.
To find this variable as a constant splash path equals using an interpolated string set.
This to be underscore underscore the name using the global no dodgiest Durnan variable to get the directory
of this file indexed on HTML being the same directory as the ImageWare opening.
Slash, splash, dot, PMG, save.
I'll reload with command are is the new button, so click.
And splashed Pangea's opened with the Mac preview app, which will be the default for most Macs, a
way better and preferred image viewer than what we can provide from within our app.
So open path allowing us to open a file with the system's default application.
But another way to open files is with the systems given file explorer.
The file explorer, despite really being part of the operating system, is in fact an application in
itself with which to browse the file system.
Using that same Slashdot PNG file to demonstrate, I'll add another button calling show splash file
labeled show Slashdot PMG.
Copy that function name, duplicate this one show splash file in which to now show this file in the
file system, I'll pass that same absolute path to shall dot show item in folder.
And before I save and show this, let's also add one more step.
The shell module allows us to place a resource in the system's trash.
Add a fourth button, delete splash file.
Label delete, splashed out PMG, create the function for handling this, duplicate this one.
Calling once again on that Slashdot PNG file path shall dot move item to trash, keep in mind that moving
an item to trash is not the same as actually deleting it.
This keeps the final deletion in the hands of the user and simply allows us to place a file in the operating
systems trash directory.
Save this.
Refresh.
Click the first new button.
Which launches a find a window with that file selected finder just being the Mac filesystem browser,
a somewhat standalone application as opposed to Linux and Windows, I'll move this to the side of it
so we can see the file.
When I now move it to the trash, click again and gone.
Keep in mind that whilst we only worked in the Renderer process for this lesson, Shell is a shared
module with the exact same implementation in the main process.